.button
  position: relative
  display: inline-block
  background: #4792ff
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)
  padding: 10px 20px
  color: #fff
  cursor: pointer
  border-radius: 3px
  transition: box-shadow .1s ease
  &:hover:not(.disabled)
    box-shadow: 0 5px 4px -3px rgba(0,0,0,.2), 0 3px 5px 1px rgba(0,0,0,.14), 0 3px 5px 2px rgba(0,0,0,.12)
  &:active:not(.disabled)
    box-shadow: none
  &.loading
    padding-right: 35px
    transition: padding .3s ease
    &::after
      position: absolute
      right: 10px
      top: 7px
      content: ''
      display: inline-block
      border-radius: 50%
      width: 14px
      height: 14px
      border-top: 2px solid rgba(255, 255, 255, 0.3)
      border-right: 2px solid rgba(255, 255, 255, 0.3)
      border-bottom: 2px solid rgba(255, 255, 255, 0.3)
      border-left: 2px solid rgba(255, 255, 255, 0.7)
      transform: translateZ(0)
      animation: spin 1s infinite linear
  &.pale
    background: #b2bec3
  &.disabled
    cursros: default
    background: #b2bec3
  .status-button &
    margin-right: 15px

@keyframes spin
  0%
    transform: rotate(0)
    animation-timing-function: cubic-bezier(.55,.055,.675,.19)
  50%
    transform: rotate(180deg)
    animation-timing-function: cubic-bezier(.215,.61,.355,1)
  100%
    transform: rotate(360deg)
